<template>
	<view>
		<view class="page">
		   <comp-common v-bind="{data:data}"></comp-common>
		    <comp-header v-bind="{data:data}"></comp-header>
		    <view class="body after-navber">
		        <view class="search-bar flex flex-row">
		            <view class="flex-grow-1">
		                <view style="padding: 18upx 0 18upx 24upx">
		                    <input @confirm="searchSubmit" confirmType="search" name="keyword" placeholder="搜索"></input>
		                </view>
		            </view>
		            <view @click="hideCatList" class="flex-grow-0" style="padding: 33upx 24upx;font-size: 0" v-if="data.show_cat_list">
		                <image src="../../static/store/shop-cat.png" style="width: 38upx;height: 30upx;"></image>
		            </view>
		            <view @click="showCatList" class="flex-grow-0" style="padding: 33upx 24upx;font-size: 0" v-else>
		                <image src="../../static/store/shop-cat.png" style="width: 38upx;height: 30upx;"></image>
		            </view>
		        </view>
		        <view class="cat-list " :class="[data.show_cat_list?'show':'']">
		            <block v-if="data.cat_list&&data.cat_list.length">
		                <navigator openType="redirect" :url="'../../store/shop-list/shop-list?cat_id='+item.id" v-for="(item,index) in data.cat_list" :key="index">
		                    {{item.name}}
		                </navigator>
		            </block>
		            <view style="text-align: center;color: #888;font-size: 9pt;padding-bottom: 24upx;" v-else>暂无店铺类目</view>
		        </view>
		        <view class="shop-list">
		            <view class="shop-item" v-for="(item,key) in data.list" :key="key">
		                <view class="flex flex-row" style="padding: 24upx;border-bottom: 1upx solid #e3e3e3">
		                    <view class="flex-grow-0">
		                        <image :src="item.logo" style="width: 100upx;height: 100upx;border: 1upx solid #eee"></image>
		                    </view>
		                    <view class="flex-grow-1" style="padding: 0 24upx">
		                        <view style="padding-top:2upx;margin-bottom: 8upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
		                            {{item.name}}
		                        </view>
		                        <view class="flex" style="color: #888;font-size: 9pt;">
		                            <view style="margin-right: 30upx">商品数:{{item.goods_count}}</view>
		                            <view v-if="data.__is_sales">已售:{{item.sell_goods_count}}</view>
		                        </view>
		                    </view>
		                    <view class="flex-grow-0 flex-y-center">
		                        <navigator style="display: inline-block;border: 1upx solid #e3e3e3;border-radius: 8upx;padding: 8upx 16upx;color: #666;font-size: 9pt" :url="'../../store/shop/shop?store_id='+item.id">进店逛逛
		                        </navigator>
		                    </view>
		                </view>
		                <view class="goods-list">
		                    <scroll-view scrollX style="width:100%;white-space: nowrap;" v-if="item.goods_list&&item.goods_list.length">
		                        <navigator class="goods-item" :url="'/pages/goods/goods?id='+gitem.id" v-for="(gitem,gindex)  in  item.goods_list" :key="gindex">
		                            <image :src="gitem.cover_pic" style="width: 220upx;height: 220upx;"></image>
		                            <view>￥{{gitem.price}}</view>
		                        </navigator>
		                    </scroll-view>
		                    <view style="padding: 24upx;color: #888;font-size: 9pt;text-align: center;" v-else>暂无商品</view>
		                </view>
		            </view>
		        </view>
		        <view style="text-align: center;padding: 24upx;color: #888;font-size: 9pt;" v-if="data.no_more">没有店铺了</view>
		        <view class="loading-bar " :class="[data.loading?'show':'']">
		            <image :src="data.__wxapp_img.system.loading_black.url" style="width: 50upx;height: 50upx;"></image>
		        </view>
		    </view>
		    	<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
		
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				 data: {
				    cat_id: "",
				    keyword: "",
				    list: [],
				    page: 1,
				    no_more: !1,
				    loading: !1
				}
			}
		},
		  onLoad: function(t) {myVue = this;
		    myVue.getApp.page.onLoad(this, t), t.cat_id && (this.data.cat_id = t.cat_id), this.loadShopList();
		},
		onReady: function() {
		    myVue.getApp.page.onReady(this);
		},
		onShow: function() {
		    myVue.getApp.page.onShow(this);
		},
		onHide: function() {
		    myVue.getApp.page.onHide(this);
		},
		onUnload: function() {
		    myVue.getApp.page.onUnload(this);
		},
		onPullDownRefresh: function() {},
		onReachBottom: function() {
		    this.loadShopList();
		},
		methods:{
			loadShopList: function(t) {
			    var a = this;
			    a.data.no_more ? "function" == typeof t && t() : a.data.loading || (a.setData({
			        loading: !0
			    }), a.getApp.request({
			        url: a.getApp.api.store.shop_list,
			        data: {
			            keyword: a.data.keyword,
			            cat_id: a.data.cat_id,
			            page: a.data.page
			        },
			        success: function(t) {
			            if (0 == t.code) {
			                if (!t.data.list || !t.data.list.length) return void a.setData({
			                    no_more: !0,
			                    cat_list: t.data.cat_list
			                });
			                a.data.list || (a.data.list = []), a.data.list = a.data.list.concat(t.data.list), 
			                a.setData({
			                    list: a.data.list,
			                    page: a.data.page + 1,
			                    cat_list: t.data.cat_list
			                });
			            }
			        },
			        complete: function() {
			            a.setData({
			                loading: !1
			            }), "function" == typeof t && t();
			        }
			    }));
			},
			
			searchSubmit: function(t) {
			    var a = t.detail.value;
			    this.setData({
			        list: [],
			        keyword: a,
			        page: 1,
			        no_more: !1
			    }), this.loadShopList(function() {});
			},
			showCatList: function() {
			    this.setData({
			        show_cat_list: !0
			    });
			},
			hideCatList: function() {
			    this.setData({
			        show_cat_list: !1
			    });
			}
		}
		
	}
</script>

<style scoped>
.search-bar {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 1upx solid #e3e3e3;
    border-bottom: 1upx solid #e3e3e3;
    background: #efeff4;
}

.search-bar input {
    background: #fff;
    border: 1upx solid #e3e3e3;
    border-radius: 999upx;
    height: 60upx;
    text-align: center;
    font-size: 9pt;
}

.cat-list {
    position: fixed;
    z-index: 100;
    top: 96upx;
    left: 0;
    width: 100%;
    border-bottom: 1upx solid #e3e3e3;
    background: #f9f9f9;
    padding-top: 24upx;
    padding-right: 24upx;
    visibility: hidden;
}

.cat-list.show {
    visibility: visible;
}

.cat-list navigator {
    display: inline-block;
    margin: 0 0 24upx 24upx;
    background: #fff;
    padding: 12upx 24upx;
    border-radius: 999upx;
    border: 1upx solid #e3e3e3;
    font-size: 9pt;
}

.shop-list {
    padding-top: 96upx;
}

.shop-item {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
}

.goods-list {
    background: #e6e6e6;
}

.goods-list .goods-item {
    position: relative;
    font-size: 0;
    background: #fff;
    margin: 8upx;
    display: inline-block;
}

.goods-list .goods-item view {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(255,255,255,.85);
    color: #ff4544;
    font-weight: bold;
    padding: 6upx;
    text-align: center;
    font-size: 9pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loading-bar {
    text-align: center;
    visibility: hidden;
    padding: 8upx;
}

.loading-bar.show {
    visibility: visible;
}
</style>
